<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="12" :lg="6">
        <color-card name="服务场所" :value="companyStatistics.icafe">
          <template #icon>
            <platform style="width: 1em; height: 1em" />
          </template>
        </color-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <color-card name="前台用户" :value="companyStatistics.user" bgColor="#F591A2">
          <template #icon>
            <user-filled style="width: 1em; height: 1em" />
          </template>
        </color-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <color-card name="公司员工" :value="companyStatistics.staff" bgColor="#FEAA4F">
          <template #icon>
            <help-filled style="width: 1em; height: 1em" />
          </template>
        </color-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <color-card name="公司部门" :value="companyStatistics.department" bgColor="#40D4B0">
          <template #icon>
            <management style="width: 1em; height: 1em" />
          </template>
        </color-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :lg="8">
        <el-card>
          <template #header>区域分布</template>
          <div>
            <mm-echart :option="neimengguOptionRef"></mm-echart>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <el-card>
          <template #header>场所类型</template>
          <div>
            <mm-echart :option="categoryOptionRef"></mm-echart>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <el-card>
          <template #header>呼和浩特辖区</template>
          <div>
            <mm-echart :option="hohhotOptionRef"></mm-echart>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Platform, UserFilled, HelpFilled, Management } from '@element-plus/icons'
import { useStore } from 'vuex'
import ColorCard from '@/components/color-card/index.vue'
import MmEchart from '@/components/mm-echart/index.vue'
import { option as neimengguOption } from './config/neimenggu-echart.config'
import { option as categoryOption } from './config/category-echart.config'
import { option as hohhotOption } from './config/hohhot-echart.config'
import { EChartsOption, MapSeriesOption, PieSeriesOption } from 'echarts'
import { deepClone } from '@/utils/common'

export default defineComponent({
  name: 'Dashboard',
  components: { ColorCard, Platform, UserFilled, HelpFilled, Management, MmEchart },
  setup() {
    const store = useStore()

    // 请求“网吧统计”数据
    store.dispatch('dashboard/init')

    const companyStatistics = computed(() => store.getters['dashboard/companyStatistics'])

    const neimengguOptionRef = computed<EChartsOption>(() => {
      const raw = deepClone(neimengguOption)
      ;(raw.series as MapSeriesOption).data = computed(() => store.getters['dashboard/icafeNeimengguStatistics']).value
      return raw
    })
    const categoryOptionRef = computed<EChartsOption>(() => {
      const raw = deepClone(categoryOption)
      ;(raw.series as PieSeriesOption).data = computed(() => store.getters['dashboard/icafeCategoryStatistics']).value
      return raw
    })
    const hohhotOptionRef = computed<EChartsOption>(() => {
      const raw = deepClone(hohhotOption)
      ;(raw.series as PieSeriesOption).data = computed(() => store.getters['dashboard/icafeHohhotStatistics']).value
      return raw
    })

    return { companyStatistics, neimengguOptionRef, categoryOptionRef, hohhotOptionRef }
  }
})
</script>

<style lang="less" scoped>
.el-row {
  &:nth-child(1) {
    margin-top: -5px;
  }
}
.el-col {
  margin: 5px 0;
}
</style>
